/* 基础布局样式 */
page{
  background-color: #ffefd5;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #ffefd5; /* 淡粉色背景，增加趣味性 */
}

.content {
  margin-top: 40px;
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('./images/bg_fun.jpg'); /* 可以放一张搞笑的背景图 */
}

.footer {
  margin-top: 60px;
  padding: 5px;
  background-color: #ffc0cb; /* 浅粉红色，符合土味风格 */
  text-align: center;
  font-style: italic;
}

/* 内容区域样式 */
.screenshot {
  width: 80%;
  border-radius: 50%;
  border: 5px dashed red; /* 红色虚线边框，增加搞怪元素 */
}

.header {
  margin-top: 20px;
  position: relative;
}

.title {
  font-size: 40px;
  color: #008000; /* 使用鲜明的绿色，突出主题 */
  text-shadow: 2px 2px 2px #ffa500; /* 文字阴影，增加视觉效果 */
  white-space: pre;

  //蚊字放大然后旋转离开屏幕
  &.animation{
    z-index: 1;
    position: absolute;
    top: 0;
    left: 180px;
    animation: rotate 2s forwards, funnyFly 2s 2s forwards;
    // animation: funnyFly 5s forwards;
  }

  @keyframes rotate {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(3) rotate(360deg);
    }
  }

  @keyframes fly {
    0% {
      top: 0;
    }
    100% {
      top: -1000px;
    }
  }

  @keyframes funnyFly {
    0% {
      top: 0;
      left: 180px;
    }
    25% {
      top: 100px; /* 稍微向下移动 */
      left: 200px; /* 向右移动 */
    }
    50% {
      top: 50px; /* 向上移动 */
      left: 160px; /* 向左移动 */
    }
    75% {
      top: 150px; /* 再向下移动 */
      left: 220px; /* 再向右移动 */
    }
    100% {
      top: -700px; /* 最后飞出屏幕 */
      left: 500px; /* 向右飞出屏幕 */
    }
  }
}

.title2 {
  font-size: 18px;
  color: #ff6347; /* 西瓜红色 */
  padding: 5px;
  margin-top: 5px;
  text-align: center;
}

/* 按钮样式 */
.button {
  margin-top: 20px;
  background-color: #ffff00; /* 鲜黄色背景 */
  color: #ff00ff; /* 紫色文字 */
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 8px #666, 0 -2px #666 inset; /* 按钮阴影效果 */
  // transform: rotate(-5deg); /* 微微倾斜，增加搞怪感 */
  font-weight: bold;
  border: 2px solid #ffa500; /* 金色虚线边框 */
}

.button view {
  font-size: 16px;
}

/* 版权及底部文字样式 */
.copyright-text {
  font-size: 20px;
  color: #8a2be2; /* 蓝紫色 */
}

.footer-text {
  font-size: 30px;
  color: #20b2aa; /* 浅海洋绿 */
  margin-top: 5px;
  font-weight: bold;
  color: #ff6347; /* 使用番茄色，增加土气感 */
  padding: 5px; /* 增加内边距 */
  text-shadow: 
    1px 1px 0px #ff0000, /* 红色阴影 */
    2px 2px 0px #00ff00, /* 绿色阴影 */
    3px 3px 0px #0000ff; /* 蓝色阴影 */
  animation: funnyFlash 0.2s infinite; /* 添加搞笑跳动动画 */
  border-radius: 10px;
}
/* 搞笑的闪烁动画 */
@keyframes funnyFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
